<template>
  <div>
    <ul class="grid-cols-2 grid gap-4 lg:grid-cols-4 lg:gap-8">
      <nuxt-link
        v-for="(item, index) in 10"
        class="w-full"
        :key="index"
        :to="`/product/${cate_id}/details/${index}`"
      >
        <el-image
          class="w-full aspect-w-1 aspect-h-1"
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          fit="cover"
        ></el-image>
        <p
          class="text-base p-1 truncate w-full"
          title="工业触摸屏7寸昆仑通态TPC7022Ex"
        >
          工业触摸屏7寸昆仑通态TPC7022Ex
        </p>
      </nuxt-link>
    </ul>
    <div class="flex justify-center mt-10">
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      />
    </div>
  </div>
</template>

<script setup>
const route = useRoute();
const cate_id = route.params.cate_id;
</script>
<style scoped lang="scss"></style>
